import Inula from 'openinula';
import classNames from 'classnames';
import "./components.less";
import pickAttrs from '../../../../utils/pickAttrs';

const prefix = "form-table";
export const Classes = {
  Table: `${prefix}`,
  TableBody: `${prefix}-body`,
  TableRow: `${prefix}-row`,
  TableHead: `${prefix}-head`,
  TableCell: `${prefix}-cell`,
};
export interface TableCellProps extends Inula.HtmlHTMLAttributes<HTMLTableCellElement> {
  componentType?: "th" | "td"
}
export const TableCell = Inula.forwardRef<HTMLTableCellElement, TableCellProps>((props, ref) => {
  const {
    children,
    className,
    componentType = "td",
    ...rest
  } = props;

  return Inula.createElement(
    componentType,
    { className: classNames(Classes.TableCell, className), ref, ...pickAttrs(rest) },
    children
  );
});

export type TableRowProps = Inula.HtmlHTMLAttributes<HTMLTableRowElement>;
export const TableRow = Inula.forwardRef<HTMLTableRowElement, TableRowProps>((props, ref) => {
  const {
    children,
    className,
    ...rest
  } = props;

  return (
    <tr className={classNames(Classes.TableRow, className)} ref={ref} {...pickAttrs(rest)}>
      {children}
    </tr>
  );
});

export const TableBody = Inula.forwardRef<HTMLTableSectionElement, Inula.HtmlHTMLAttributes<HTMLTableSectionElement>>((props, ref) => {
  const {
    children,
    className,
    ...rest
  } = props;

  return (
    <tbody className={classNames(Classes.TableRow, className)} ref={ref} {...pickAttrs(rest)}>
      {children}
    </tbody>
  );
});

export type TableHeadProps = Inula.HtmlHTMLAttributes<HTMLTableSectionElement>;
export const TableHead = Inula.forwardRef<HTMLTableSectionElement, TableHeadProps>((props, ref) => {
  const {
    children,
    className,
    ...rest
  } = props;

  return (
    <thead className={classNames(Classes.TableHead, className)} ref={ref} {...pickAttrs(rest)}>
      {children}
    </thead>
  );
});
